<template>
	<view class="gy-special-buttons">
		<view class="gy-special-button secondary" @click.stop="emits('cancel')">{{ props.secondaryText }}</view>
		<view class="gy-special-button primary" @click.stop="emits('confirm')">{{ props.primaryText }}</view>
	</view>
</template>

<script lang="ts" setup>
	const emits = defineEmits(["cancel", "confirm"]);
	const props = defineProps({
	    secondaryText: {
	        type: String,
	        default: "取消"
	    },
		primaryText: {
		    type: String,
		    default: "确定"
		}
	});
</script>

<style lang="scss" scoped>
	.gy-special-buttons{
		position: relative;
		width: 100%;
		height: 100rpx;
		.gy-special-button{
			position: absolute;
			top: 0;
			z-index: 20;
			width: calc(50% + 15rpx);
			height: 100rpx;
			@include flex-center-center;
			font-size: var(--gy-font-size-medium);
		}
		.gy-special-button.secondary{
			left: 0;
		    background: #fff;
		    box-shadow: none;
		    color: var(--gy-text-color-primary);
			border-radius: 50rpx 0 0 50rpx;
			-webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 50rpx) 100%, 0 100%);
			background-color: var(--gy-page-bg-color);
		}
		.gy-special-button.primary{
			right: 0;
		    font-size: var(--gy-font-size-medium);
		    background: linear-gradient(315deg, #07BF66 0%, #81AFFF 100%);
		    color: #ffffff;
			border-radius: 0rpx 50rpx 50rpx 0;
			-webkit-clip-path: polygon(50rpx 0, 100% 0, 100% 100%, 0 100%);
		}
		.gy-special-button.secondary:active{
			background-color: var(--gy-card-line-color);
		}
		.gy-special-button.primary:active{
			opacity: 0.8;
		}
	}
	
</style>